.date-range {
	--color-border: var(--color-border-1);
	--date-range-height: 2.25rem;
	--date-range-input-width: 7em;
	position: relative;
	display: inline-flex;
	height: var(--date-range-height, 2.25rem);
	border-radius: 4px;

	.clear-icon {
		position: absolute;
		top: 50%;
		right: 0;
		color: var(--color-text-3);
		transform: translateY(-50%);

		&:hover {
			color: var(--color-text-2);
		}
	}

	:global {
		.DateRangePickerInput {
			background: transparent;
			border: none;

			.DateInput {
				width: var(--date-range-input-width, 7em);
				background: transparent;

				&:first-child {
					border-radius: 4px 0 0 4px;

					.DateInput_input {
						text-align: right;
					}
				}

				.DateInput_input {
					height: calc(var(--date-range-height) - 2px);
					padding: 0 0.5rem;
					color: var(--color-text-1);
					font-size: var(--text-md);
					line-height: var(--date-range-height);
					background: transparent;
					border: none;

					&.DateInput_input__focused {
						box-shadow: 0 -2px 0 0px var(--color-5) inset;
					}
				}
			}

			.DateRangePickerInput_arrow_svg {
				width: 1rem;
				height: 1rem;
				fill: var(--color-text-2);
			}

			.DateRangePicker_picker {
				z-index: 10;
			}

			.DateRangePickerInput_clearDates {
				outline: none;
			}
		}
	}
}
.date-range {
	:global {
		.ant-picker-clear {
			right: 11px;
		}
	}
}
:global {
	.CalendarDay__selected,
	.CalendarDay__selected:active,
	.CalendarDay__selected:hover {
		background: var(--color-4) !important;
		border: 1px double var(--color-4) !important;
	}

	.CalendarDay__selected_span,
	.CalendarDay__hovered_span,
	.CalendarDay__hovered_span:hover {
		background: var(--color-1);
		border: 1px double var(--color-1);
		color: var(--color-text-4)
	}

	.CalendarDay__selected_span:active,
	.CalendarDay__selected_span:hover {
		background: var(--color-4) !important;
		border: 1px double var(--color-4) !important;
	}

	.DateRangePicker_picker {
		right: 0;
    left: auto !important;
	}
}
